<template>
	<view class="textDetection_box">
		<view class="content" v-if="!prohibitedWords">
			<view class="textarea">
				<u-textarea height="822rpx" maxlength="-1" v-model="text" border="false" placeholder="点击输入文案或长按粘贴文案">
				</u-textarea>
			</view>
			<view class="tools">
				<view class="tools_left">
					<view class="left" @click="delText">
						<u-icon name="trash" size="18" color="#999999"></u-icon>
						<text class="text">清除文本</text>
					</view>
				</view>
				<view class="tools_right">
					<text class="text">字数 {{text.length}}</text>
				</view>
			</view>
		</view>
		<scroll-view scroll-y="true" class="result_comparison" v-else>
			<view class="results_textarea">
				<view class="vocabulary" v-for="(item,index) in sensitiveWords " :key="index">
					<text @click="modify(index)" :class="[!item.isRed ? '' :'markedR' ]">{{ item.text }}</text>
				</view>
			</view>
		</scroll-view>
		<!-- <view class="button">
      <view class="button_start" @click="Retest">
        <u-button text="开始检测" color="#5490FF" size="large"></u-button>
      </view>
    </view> -->
		<view class="button">
			<view class="button_left" @click="Retest">
				<u-button :text="prohibitedWords?'重新检测':'开始检测'" color="#5490FF" size="large"></u-button>
			</view>
			<view class="button_right" @click="copyRes">
				<u-button text="复制文案" color="#1EB930" size="large"></u-button>
			</view>
		</view>
		<view class="tip_box">
			<text>提示：敏感词检测仅供参考，让创作者少违规、少限流。如存在敏感词，会标红，点击可修改。</text>
		</view>
		<!-- 导入方式选择 -->
		<u-popup :show="show" :round="10" @close="close" @open="open" mode="center">
			<view class="u-popup_box">
				<view class="popup_title">敏感词替换</view>
				<view class="popup_title2">正在替换敏感词 “ {{ words }} ” </view>
				<u-divider></u-divider>
				<view class="selectControl">
					<view>是否全部替换</view>
					<u-switch v-model="checked" @change="change"></u-switch>
				</view>
				<u-divider></u-divider>
				<view class="selectControl2">
					<view style="margin-right: 20rpx;">敏感词替换为</view>
					<view class="ipt">
						<u--input placeholder="点击输入替换词" border="none" v-model="value" @change="change"></u--input>
					</view>
				</view>
				<u-divider></u-divider>
				<view class="btn_box_within">
					<view class="btnz_lftt" @click="cancelReplace">取消</view>
					<view class="btnz_right" @click="replace">{{ checked?'全部替换':'替换' }}</view>
				</view>
			</view>
		</u-popup>
		<!-- 非会员看广告提示 -->
		<u-modal :show="vipShow" :title="'温馨提示'" :content="'您还不是会员,此功能需开通会员才可使用。'" cancelText="取消" confirmText="去开通"
			showCancelButton="true" @cancel="cancel" @confirm="govip" :closeOnClickOverlay="true"
			@close="vipShow = false"></u-modal>
	</view>
</template>

<script>
	import {
		textCheck
	} from "../../utils/textCheck.js";
	export default {
		data() {
			return {
				vipShow: false,
				isVip: false,
				sensitiveWords: [],
				text: "",
				show: false,
				checked: false,
				words: "",
				value: "",
				replaceText: "",
				subscript: 0,
				prohibitedWords: false
			};
		},
		onShow() {
			this.isVip = uni.getStorageSync('vipType').vipStatus == 1 ? true : false;
			// this.isVip = true;
		},
		onLoad(option) {
			this.text = option.writing ? JSON.parse(decodeURIComponent(option.writing)) : '';
		},
		methods: {
			copyRes() {
				if (!this.prohibitedWords) {
					uni.setClipboardData({
						data: this.text,
						showToast: true
					});
				} else {
					uni.showToast({
						title: '存在敏感词,重新检测后复制文案',
						icon: "none"
					})
				}

			},
			modify(index) {
				let item = this.sensitiveWords[index];
				if (item.isRed) {
					this.words = item.text
					this.show = true
					this.subscript = index
				}
			},
			hilight_str(arr) {
				arr.forEach((item) => {
					var reg = new RegExp(item, "g");
					this.text = this.text.replace(reg, "<<<" + item + "<<<")
				});
				let textArray = this.text.split("<<<");
				let newArray = [];
				for (var i = 0; i < textArray.length; i++) {
					let text = textArray[i];
					let dict = {
						text: text,
						isRed: false,
						index: i
					};
					for (var j = 0; j < arr.length; j++) {
						if (text == arr[j]) {
							dict.isRed = true;
						}
					}
					newArray.push(dict);
				}
				this.sensitiveWords = newArray
				console.log(this.sensitiveWords);
			},
			stripscript(s) {
				var pattern = new RegExp(
					"[`~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？]"
				);
				var rs = "";
				for (var i = 0; i < s.length; i++) {
					rs = rs + s.substr(i, 1).replace(pattern, "");
				}
				return rs;
			},
			Retest() {
				const _this = this
				let text = _this.text
				if (_this.text.trim() == '') {
					uni.showToast({
						title: '请输入文案',
						icon: "none",
						duration: 2000
					})
				} else if (_this.isVip) {
					textCheck(text).then((res) => {
						console.log(res);
						if (res.isItPass) {
							_this.prohibitedWords = false
						} else {
							_this.prohibitedWords = true
						}
						let sensitiveWords = res.data;
						if (!!sensitiveWords) {
							let array = [];
							sensitiveWords.forEach((item, index) => {
								array.push(_this.stripscript(item));
							});
							const result = Array.from(new Set(array));
							if (!!result.length) {
								_this.hilight_str(result);
							}
						} else {
							_this.sensitiveWords = [{
								text: text
							}]
						}
					});
				} else {
					_this.vipShow = true
				}
			},
			delText() {
				this.text = ''
			},
			replace() {
				let _this = this;
				let sensitiveWords = this.sensitiveWords;
				if (!this.checked) {
					// 单个替换
					sensitiveWords.forEach((item, index) => {
						if (item.text == this.words && index == this.subscript) {
							sensitiveWords[index].text = _this.value;
							sensitiveWords[index].isRed = false;
						}
					});
				} else {
					// 多个替换
					sensitiveWords.forEach((item, index) => {
						if (item.text == this.words) {
							sensitiveWords[index].text = _this.value;
							sensitiveWords[index].isRed = false;
						}
					});
				}
				let text = "";
				sensitiveWords.forEach((item, index) => {
					if (!!item.text) {
						text = text + item.text;
					}
				});
				console.log(text, "text");
				this.sensitiveWords = sensitiveWords
				this.show = false
				this.value = ''
				this.text = text
				this.replaceText = text
				console.log(this.sensitiveWords);
			},
			cancelReplace() {
				this.show = false
			},
			change() {

			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			},
			cancel() {
				this.vipShow = false
			},
			govip() {
				this.vipShow = false;
				if (uni.getStorageSync('OS') !== 'ios') {
					uni.navigateTo({
						url: '/pages/paymentCenter/paymentCenter'
					});
				} else {
					if (getApp().globalData.iosPay == 0) {
						uni.showModal({
							title: '提示',
							content: '由于相关规范，IOS功能暂不可用',
							showCancel: false,
							success: function(res) {
								if (res.confirm) {
									console.log('用户点击确定');
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					} else if (getApp().globalData.iosPay == 1) {
						uni.navigateTo({
							url: '/pages/goods/goods'
						});
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	.markedR {
		color: rgb(240, 10, 10);
		text-decoration: underline;
	}

	.u-popup_box {
		width: 650rpx;
		padding: 20rpx 0;

		.popup_title {
			width: 100%;
			text-align: center;
			margin-top: 10rpx;
			font-size: 30rpx;
			font-weight: 600;
		}

		.popup_title2 {
			width: 100%;
			text-align: center;
			margin-top: 20rpx;
			font-size: 26rpx;
			margin-bottom: 30rpx;
		}

		.selectControl {
			margin: 20rpx 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.selectControl2 {
			margin: 0rpx 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.ipt {
				flex: 1;
			}
		}

		.btn_box_within {
			margin-top: 30rpx;
			width: 91%;
			bottom: 50rpx;
			display: flex;
			justify-content: space-between;
			padding: 30rpx;

			.btnz_lftt {
				text-align: center;
				width: 260rpx;
				height: 80rpx;
				border: 0.5rpx solid #5490FF;
				border-radius: 18rpx;
				line-height: 80rpx;
				color: #5490FF;
			}

			.btnz_right {
				text-align: center;
				width: 260rpx;
				height: 80rpx;
				background-color: #5490FF;
				border-radius: 18rpx;
				line-height: 80rpx;
				color: #fff;
			}
		}
	}

	.result_comparison {
		margin-top: 31rpx;
		margin-bottom: 20rpx;
		padding-bottom: 20rpx;
		width: 696rpx;
		height: 922rpx;
		background: #FFFFFF;
		border-radius: 18rpx;

		.results_textarea {
			padding: 9px;
		}

		.vocabulary {
			color: #606266;
			font-size: 15px;
			margin-left: 5rpx;
			margin-right: 5rpx;
			display: inline-block;
		}
	}

	.tip_box {
		margin: auto;
		margin-top: 53rpx;
		width: 696rpx;

		text {
			font-size: 22rpx;
			font-family: PingFang SC;
			color: #333333;
			line-height: 36rpx;
		}
	}

	.button {
		margin-top: 62rpx;
		width: 100%;
		display: flex;
		justify-content: space-between;

		.button_start {
			width: 100%;
		}

		.button_left {
			width: 47%;
		}

		.button_right {
			width: 47%;
		}
	}

	.textarea {
		height: 822rpx;
	}

	.text {
		font-size: 19rpx;
		font-family: PingFang SC;
		color: #999999;
	}

	.textDetection_box {
		padding: 0 27rpx;

		.content {
			margin-bottom: 19rpx;
			width: 696rpx;
			height: 922rpx;
			border-radius: 18rpx;
			background-color: #fff;
		}

		.tools {
			height: 100rpx;
			padding: 0 27rpx;
			display: flex;
			justify-content: space-between;

			.tools_left {
				display: flex;
				justify-content: space-between;

				.left {
					display: flex;
					justify-content: space-between;
					align-items: center;
				}

				.right {
					display: flex;
					align-items: center;
					margin-top: 8rpx;
				}
			}

			.tools_right {
				display: flex;
				align-items: center;
			}
		}
	}
</style>
<style>
	page {
		background-color: #f4f4f4;
	}
</style>